<!-- 友链编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate ? '修改极光推送' : '添加极光推送'"
    :visible="visible"
    width="860px"
    :destroy-on-close="true"
    :lock-scroll="false"
    :close-on-click-modal="false"
    :before-close="confirmClose"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="108px">
      <el-form-item label="名称:" prop="name">
        <el-input
          :maxlength="10"
          v-model="form.name"
          placeholder="请填写名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="目标人群" prop="push_target">
        <div class="unitSearch">
          <el-select
            clearable
            v-model="form.push_target"
            placeholder="请选择目标人群"
            class="ele-fluid"
          >
            <el-option
              v-for="item in push_target_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="发送方式" prop="push_type">
        <div class="unitSearch">
          <el-select
            clearable
            v-model="form.push_type"
            placeholder="请选择发送方式"
            class="ele-fluid"
            @change="showReleaseTime"
          >
            <el-option
              v-for="item in push_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="发送时间:" v-if="showRelease">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="form.push_time"
          type="datetime"
          placeholder="请选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="目标转化事件" prop="target_event">
        <div class="unitSearch">
          <el-select
            clearable
            v-model="form.target_event"
            placeholder="请选择目标转化事件"
            class="ele-fluid"
          >
            <el-option
              v-for="item in target_event_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item
        label="推送标题:"
        style="margin-top: 20px"
        prop="push_title"
      >
        <el-input
          clearable
          :maxlength="50"
          v-model="form.push_title"
          placeholder="请输入推送标题"
        />
      </el-form-item>
      <el-form-item
        label="推送内容:"
        style="margin-top: 20px"
        prop="push_content"
      >
        <el-input
          :rows="6"
          clearable
          type="textarea"
          :maxlength="500"
          show-word-limit
          v-model="form.push_content"
          placeholder="请输入推送内容"
        />
      </el-form-item>
      <el-form-item label="安卓跳转:" prop="android_intent">
        <el-input
          :placeholder="`请输入内容:${android_intent_dec}`"
          v-model="form.android_intent"
          class="input-with-select"
        >
          <el-select
            :placeholder="`${android_intent_type_dec}`"
            v-model="form.android_intent_type"
            slot="prepend"
            style="width: 150px"
            @change="androidChange"
          >
            <el-option
              v-for="item in android_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="IOS跳转:" prop="ios_intent">
        <el-input
          :placeholder="`请输入内容:${ios_intent_dec}`"
          v-model="form.ios_intent"
          class="input-with-select"
        >
          <el-select
            :placeholder="`${ios_intent_type_dec}`"
            v-model="form.ios_intent_type"
            slot="prepend"
            style="width: 150px"
            @change="iosChange"
          >
            <el-option
              v-for="item in ios_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="推送平台:" prop="platform">
        <el-radio-group v-model="form.platform">
          <el-radio :label="1" border>全部</el-radio>
          <el-radio :label="2" border>安卓</el-radio>
          <el-radio :label="3" border>IOS</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否启用:" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1" border>是</el-radio>
          <el-radio :label="2" border>否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="confirmClose()">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import axios from "axios";

export default {
  name: "jiguangPushEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },

  data() {
    return {
      push_type_list: [
        {
          value: 1,
          label: "立即发送",
        },
        {
          value: 2,
          label: "定时发送",
        },
        {
          value: 3,
          label: "重复发送",
          disabled: true,
        },
        {
          value: 4,
          label: "围栏发送",
          disabled: true,
        },
        {
          value: 5,
          label: "行为触发",
          disabled: true,
        },
      ],
      push_target_list: [
        {
          value: 1,
          label: "广播所有人",
        },
        {
          value: 2,
          label: "设备标签(Tag)",
          disabled: true,
        },
        {
          value: 3,
          label: "设备别名(Alias)",
          disabled: true,
        },
        {
          value: 4,
          label: "Registration ID",
          disabled: true,
        },
        {
          value: 5,
          label: "用户分群推送",
          disabled: true,
        },
      ],
      target_event_list: [
        {
          value: 0,
          label: "默认(可选参数)",
        },
        {
          value: 1,
          label: "应用切换至前台发送",
        },
        {
          value: 2,
          label: "应用目标切换至后台",
        },
      ],
      android_options: [
        { value: 0, label: "应用首页" },
        { value: 1, label: "跳转到目标页" },
        { value: 2, label: "跳转deeplink" },
        { value: 3, label: "网页跳转" },
      ],
      ios_options: [
        { value: 1, label: "应用首页" },
        { value: 2, label: "跳转到目标页" },
        { value: 3, label: "网页跳转" },
      ],
      showRelease: false,
      // 表单数据
      form: Object.assign(
        {
          member_id: "",
          source: "",
          title: "",
          content: "",
        },
        this.data
      ),
      // 表单验证规则
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        push_time: [
          { required: true, message: "请选择发送时间", trigger: "blur" },
        ],
        push_target: [
          { required: true, message: "请选择目标人群", trigger: "blur" },
        ],
        push_type: [
          { required: true, message: "请选择发送方式", trigger: "blur" },
        ],
        target_event: [
          { required: true, message: "请选择目标转化事件", trigger: "blur" },
        ],
        platform: [
          { required: true, message: "请选择推送平台", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择是否启用", trigger: "blur" },
        ],
        push_title: [
          { required: true, message: "请输入推送标题", trigger: "blur" },
        ],
        push_content: [
          { required: true, message: "请输入推送内容", trigger: "blur" },
        ],
        android_intent: [
          {
            required: false,
            message: "请选择输入安卓消息跳转",
            trigger: "blur",
          },
        ],
        ios_intent: [
          {
            required: false,
            message: "请选择输入苹果消息跳转",
            trigger: "blur",
          },
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,

      //分页功能
      pageSize: 15, //每页显示条数  6条刚好
      currentPage: 1, //当前页数
      pageCount: 6, //按钮数，超过时会折叠
      pageTotal: 0, //总条数
      //安卓跳转说明
      android_intent_dec: "",
      android_intent_type_dec: "请选择跳转类型",
      ios_intent_dec: "",
      ios_intent_type_dec: "请选择跳转类型",
    };
  },

  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.showRelease = this.form.push_type === 2;
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    },
  },
  methods: {
    androidChange() {
      if (this.form.android_intent_type == 1) {
        this.android_intent_dec =
          "intent:#Intent;action=action 路径;component= 包名 /Activity 全名;end";
        this.android_intent_type_dec = "跳转到目标页";
      } else if (this.form.android_intent_type == 2) {
        this.android_intent_dec = "scheme://test?key1=val1&key2=val2";
        this.android_intent_type_dec = "跳转deeplink";
      } else if (this.form.android_intent_type == 3) {
        this.android_intent_dec =
          "网页跳转: http://***.com 或 https://www.***.cn/";
        this.android_intent_type_dec = "网页跳转";
      } else {
        this.android_intent_dec =
          "(可为空) 默认:intent:#Intent;action=android.intent.action.MAIN;end";
        this.android_intent_type_dec = "应用首页";
      }
    },
    iosChange() {
      if (this.form.ios_intent_type == 1) {
        this.ios_intent_dec = "打开应用(注: 无需设置)";
        this.ios_intent_type_dec = "打开应用";
      } else if (this.form.ios_intent_type == 2) {
        this.ios_intent_dec = "跳转到应用目标页";
        this.ios_intent_type_dec = "跳转到应用指定页面";
      } else if (this.form.ios_intent_type == 3) {
        this.ios_intent_dec = "网页跳转: http://***.com 或 https://www.***.cn/";
        this.ios_intent_type_dec = "网页跳转";
      }
    },
    showReleaseTime() {
      if (this.form.push_type == 2) {
        this.showRelease = true;
      } else {
        this.showRelease = false;
      }
    },
    /* 保存编辑 */
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http
            .post("/jiguang.BoxThirdPushMessage/edit", this.form)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
    confirmClose() {
      this.$confirm("确定要返回吗？", "温馨提示")
        .then(() => {
          this.updateVisible(false);
          if (!this.isUpdate) {
            this.form = {};
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  color: #333;
}
</style>
